<template>
  <div class="WarningNotification">
    <TitleColumn name="预警通知" />
    <div class="content">
      <div class="header">
        <div class="text">
          <img src="./images/sms.png" alt="" />
          短信推送统计总和
        </div>
        <div class="value">
          <span>
            <CountTo :startVal="1" :endVal="517" :decimals="0" :duration="1000" />
          </span>
          次
        </div>
      </div>

      <div class="chartRef" ref="chartRef"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { useECharts } from "@gui-pkg/hooks";
import { CountTo } from "@gui-pkg/components";
import TitleColumn from "@/components/TitleColumn";
import setChartOption from "./chartOption";

const chartRef = ref(null);
const { setOptions } = useECharts(chartRef);
defineOptions({ name: "WarningNotification" });

const state = reactive({});
onMounted(() => {
  const chartOption = setChartOption();
  setOptions(chartOption);
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.WarningNotification {
  width: 100%;
  .content {
    width: 100%;
    height: calc(100% - 24px);
    background: #02123433;
    backdrop-filter: blur(10px);
    // display: flex;
    // align-items: center;
    padding: 10px 0;
    .header {
      width: 100%;
      height: 50px;
      background: url(./images/header_bg.png) no-repeat;
      background-size: 100% 100%;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text {
        display: flex;
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        align-items: center;

        img {
          width: 40px;
          margin-right: 8px;
        }
      }
      .value {
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;

        span {
          font-family: DIN Alternate;
          font-size: 20px;
          font-weight: 700;
          background-image: linear-gradient(180deg, #ffffff 21.45%, #51fbff 80.95%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent; /* 使文字颜色透明 */
        }
      }
    }
    .chartRef {
      width: 100%;
      height: calc(100% - 50px);
    }
  }
}
</style>
